---
title: VideoThumbnails
description: A library that allows you to generate an image to serve as a thumbnail from a video file.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-53/packages/expo-video-thumbnails'
packageName: 'expo-video-thumbnails'
platforms: ['android', 'ios']
---

import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { SnackInline } from '~/ui/components/Snippet';

`expo-video-thumbnails` allows you to generate an image to serve as a thumbnail from a video file.

## Installation

<APIInstallSection />

## Usage

<SnackInline label='Video Thumbnails' dependencies={['expo-video-thumbnails']}>

```jsx
import { useState } from 'react';
import { StyleSheet, Button, View, Image, Text } from 'react-native';
import * as VideoThumbnails from 'expo-video-thumbnails';

export default function App() {
  const [image, setImage] = useState(null);

  const generateThumbnail = async () => {
    try {
      const { uri } = await VideoThumbnails.getThumbnailAsync(
        'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        {
          time: 15000,
        }
      );
      setImage(uri);
    } catch (e) {
      console.warn(e);
    }
  };

  return (
    <View style={styles.container}>
      <Button onPress={generateThumbnail} title="Generate thumbnail" />
      {image && <Image source={{ uri: image }} style={styles.image} />}
      <Text>{image}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    width: 200,
    height: 200,
  },
});
```

</SnackInline>

## API

```js
import * as VideoThumbnails from 'expo-video-thumbnails';
```

<APISection packageName="expo-video-thumbnails" apiName="VideoThumbnails" />
